<template>
	<view>
		<navView :isBack="false"></navView>
		<tabBarView page="/pages/success/success"></tabBarView>
		<!-- 第一个列表项 -->
		<view class="item-container" @click="handleCharge">
			<image class="icon" src="https://hfd.bjlzkj.com/static/success/icon1.png" mode="contain"></image>
			<view class="">
				<view class="title">缴费提醒</view>
				<view class="subtitle">点击进行缴费</view>
			</view>
			<view class="arrow-container">
				<uni-icons type="right" color="#999999" size="24rpx"></uni-icons>
			</view>
		</view>

		<!-- 第二个列表项 -->
		<view class="item-container" @click="handleExchange">
			<image class="icon" src="https://hfd.bjlzkj.com/static/success/icon2.png" mode="contain"></image>
			<view class="">
				<view class="title">积分兑换</view>
				<view class="subtitle">选择兑换内容</view>
			</view>
			<view class="arrow-container">
				<uni-icons type="right" color="#999999" size="24rpx"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			handleCharge() {
				uni.showToast({
					title: '点击了缴费提醒',
					icon: 'none',
				});
			},
			handleExchange() {
				uni.showToast({
					title: '点击了积分兑换',
					icon: 'none',
				});
			},
		}
	}
</script>

<style scoped>
	.content {
		padding: 20px;
		background-color: #f5f5f5;
	}

	.item-container {
		width: 95%;
		box-sizing: border-box;
		margin: 0 auto;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		margin-bottom: 20px;
		margin-top: 30rpx;
		box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(97, 97, 97, 0.25);
	}

	.icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10px;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 5px;
	}

	.subtitle {
		font-size: 12px;
		color: #999;
	}

	.dot-container {
		position: relative;
		top: -4px;
		left: 5px;
	}

	.dot {
		width: 4px;
		height: 4px;
		background-color: #007aff;
		border-radius: 50%;
		position: absolute;
	}

	.arrow-container {
		flex: 1;
		text-align: right;
		margin-right: 10px;
	}
</style>